<template>
  <el-row :gutter="10">
    <el-col span="auto">
      <el-icon :size="iconSize">
        <UserFilled/>
      </el-icon>
      {{ bloggerInfo.bloggerName }}
    </el-col>
    <el-col span="auto">
      <el-icon :size="iconSize">
        <Calendar/>
      </el-icon>
      {{ pubDate }}
    </el-col>
    <el-col span="auto">
      <el-icon :size="iconSize">
        <View/>
      </el-icon>
      {{ post.pageview }}
    </el-col>
    <el-col span="auto">
      <el-icon :size="iconSize">
        <Timer/>
      </el-icon>
      {{ post.read_time }} 分钟
    </el-col>
    <el-col v-if="post.category!=null" span="auto">
      <el-icon :size="iconSize">
        <Folder/>
      </el-icon>
      <el-tag style="margin-left: 5px" :type="color[post.category.id%5]" :effect="'dark'">
        {{ post.category.name }}
      </el-tag>
    </el-col>
    <el-col v-if="post.tags.length>0" span="auto">
      <el-icon :size="iconSize">
        <PriceTag/>
      </el-icon>
      <el-tag style="margin-left: 5px" v-for="(item,index) in post.tags" :type="color[index]">{{ item.name }}</el-tag>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import {bloggerInfo} from "@/store/customer/inedx";
import {computed, ref} from "vue";
import {dateFormat} from "@/utils/utils";

const color = ref(['', 'success', 'info', 'warning', 'danger'])
const iconSize = ref(17)

const props = defineProps({
  post: Object,
})

const pubDate = computed(() => {
  return dateFormat(props.post.pub_date);
})

</script>
<style scoped>
.el-icon {
  top: 3px;
}
</style>